<!--
 * @Author: wangming
 * @Date: 2020-09-17 10:09:01
 * @LastEditors: wangming
 * @LastEditTime: 2022-06-13 14:58:49
 * @Description: file content
-->
<template>
  <div>
    <el-popconfirm class="dib mr10" title="点击下载模板" @confirm="downloadTem" v-if="
      fileList.length < config.__config.maxLength &&
      !disabled &&
      !viewInfo &&
      config.__config.tempalteURL
    ">
      <el-button slot="reference" type="text">
        <i class="el-icon-warning-outline"></i>
      </el-button>
    </el-popconfirm>
    <common-upload class="dib" :beforeUpload="beforeUpload" @successForName="handleUploadSuccess"
      :multiple="config.__config.multiple" v-if="
        fileList.length < config.__config.maxLength && !disabled && !viewInfo
      " :drag="config.__config.drag" :size="config.__config.size" :accept="accept">
      <div v-if="config.__config.drag">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div v-if="accept">
          <div class="el-upload__text">支持拖拽的文件格式：{{ accept }}</div>
        </div>
      </div>
      <el-button icon="el-icon-upload2" v-else>上传</el-button>
    </common-upload>
    <div v-if="fileList.length > 0" class="mt5">
      <div class="filebox ks-row-middle bgwh" v-for="(i, index) in fileList" :key="index">
        <div class="g3 ks-col ell f14">{{ i.name }}</div>
        <el-link @click="download(i)" icon="el-icon-download" class="f14" :underline="false" type="primary">下载</el-link>
        <el-button type="text" icon="el-icon-delete" v-if="!viewInfo && !disabled" @click="deleteFile(index)">删除
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import myMixin from "@/pageComponents/myMixin";
import vmMixin from "@/pageComponents/vmMixin";
import { getBasePath } from "@/config/api.config";
import { downloadFileSrc } from "@/utils/util";
import { getHmhttpserviceServerurlByKey } from '@/apis/paas/HmHttpServiceController.js'
export default {
  mixins: [myMixin, vmMixin],
  computed: {
    accept() {
      if (this.config.__config?.accept) {
        return (
          this.config.__config?.accept?.split(",").map((i) => "." + i) + ""
        );
      } else {
        return "";
      }
    },
  },
  data() {
    return {
      fileList: [],
      rootPath: '',
    };
  },
  watch: {
    value: {
      handler: function (value) {
        if (value) {
          try {
            this.fileList = JSON.parse(value);
          } catch (error) {
            this.fileList = value.split(",").map((i) => ({ name: i, path: i }));
          }
        } else {
          this.fileList = [];
        }
      },
      immediate: true,
    },
  },
  async created() {
    let { servekey: key } = this.config.__config
    if (!!key && process.env.VUE_APP_ROOT_URL === './') {
      this.rootPath = await getHmhttpserviceServerurlByKey({ key })
    }
  },
  props: {},
  methods: {
    downloadTem() {
      let fileUrl = this.config.__config.tempalteURL;
      downloadFileSrc(
        getBasePath(fileUrl),
        fileUrl?.split("/")?.reverse()[0] || "模版"
      );
    },
    beforeUpload(file) {

      const type = file.name.replaceAll(" ", "").match(/\.[A-Za-z0-9]+$/)[0];
      if (this.accept.indexOf(type) > -1 || !this.accept) {
        return true;
      } else {
        this.$message.error(`格式不正确`);
        return false;
      }
    },
    async download(value) {
      let path = '/extimg' + value.path.split('/extimg').pop()
      if (!!this.rootPath) {
        path = this.rootPath + path
      } else {
        path = getBasePath(path)
      }
      downloadFileSrc(path, value.name);
    },
    handleUploadSuccess(src) {
      let { path, name } = src;
      this.fileList.push({ path, name });
      this.$emit("input", JSON.stringify(this.fileList));
      this.runEventName("afterupload", { values: src });
    },
    deleteFile(index) {
      const file = this.fileList[index].path
      this.fileList.splice(index, 1);
      this.$emit("input", JSON.stringify(this.fileList));
      this.runEventName("afterdelete", { values: {
        file,
        fileList: JSON.stringify(this.fileList),
      }});
    },
  },
};
</script>

<style lang="scss" scoped>
.filebox {
  width: 100%;
  height: 28px;
  border-radius: 2px;
  padding: 0 8px;
  background: #f4f9ff;
  margin-bottom: 8px;
}
</style>
